<template>
  <section class="bg-gray-fa lg:pt-20 lg:pb-14 py-9 text-center">
    <div class="lg:text-3xl text-xl font-bold">
      <span class="lg:block hidden">家园共育 ·</span>
      提高口碑的三个切入点
    </div>
    <div class="lg:text-lg text-sm text-gray-66 lg:mt-4 mt-2">
      家校沟通的万能公式：生活故事+教育目标+家庭建议
    </div>
    <div
      class="
        lg:mt-14
        mt-4
        lg:px-0
        px-3
        container
        mx-auto
        lg:flex lg:space-x-[50px]
      "
    >
      <div
        class="flex flex-wrap s14-box lg:w-[610px] w-full text-white text-left"
      >
        <div class="px-6 py-5 w-[59%]">
          <div>生活细节 51%</div>
          <ul class="mt-2 text-xs leading-5">
            <li>1、幼儿园的餐点孩子吃得饱吗？</li>
            <li>2、幼儿园喝水是否充足？</li>
            <li>3、孩子赖尿，也不会告诉老师怎么办？</li>
            <li>4、为什么小孩不睡午觉</li>
            <li>……</li>
          </ul>
        </div>
        <div class="lg:pl-4 lg:pt-6 px-2 pt-4 w-[41%]">
          <div>学习发展 17%</div>
          <ul class="mt-2 text-xs leading-5">
            <li>1、幼儿园到底都教些什么？</li>
            <li>2、怎样了解孩子在幼儿园的学习情况？</li>
            <li>……</li>
          </ul>
        </div>
        <div class="w-[59%]">
          <div class="px-6 py-4">
            <div>学校沟通 24%</div>
            <ul class="mt-2 text-xs leading-5">
              <li>1、通过什么的渠道，可以了解孩子的情况？</li>
              <li>2、为什么有时候小孩不想来园？</li>
              <li>3、家长怎么和老师配合？</li>
              <li>……</li>
            </ul>
          </div>
        </div>
        <div class="w-[23%] flex items-center justify-center text-center">
          校园管理 5%
        </div>
        <div class="w-[18%] flex items-center justify-center text-center">
          其他 3%
        </div>
      </div>
      <div
        class="
          text-left
          lg:w-[540px]
          w-full
          lg:text-sm
          text-xs
          !leading-6
          lg:mt-0
          mt-4
        "
      >
        <div class="text-gray-66">
          经过调查显示，家长最关心的问题主要是以下三点：
        </div>
        <ul class="mt-[10px]">
          <li>
            <div class="font-semibold">家长希望了解幼儿在园生活细节</div>
            <div class="text-gray-66">
              现状：幼儿园场所封闭，父母不了解幼儿在园的具体生活。老师不可能向家长反馈所有的生活细节。
            </div>
          </li>
          <li class="mt-6">
            <div class="font-semibold">家长希望了解孩子当前学习发展现状</div>
            <div class="text-gray-66">
              现状：通过孩子口述、作品、老师评语，家长不足以了解孩子的发展现状，无法认可幼儿园的教育结果，甚至认为幼儿园就是玩。
            </div>
          </li>
          <li class="mt-6">
            <div class="font-semibold">家长希望得到教师的专业教育建议</div>
            <div class="text-gray-66">
              现状：一方面通过家长会、电话等方式沟通频率低内容简单。另一方面依赖老师个人能力。导致家长不知道如何配合教师进行家庭教育。
            </div>
          </li>
        </ul>
      </div>
    </div>
    <info-btn class="mt-12 lg:flex hidden" @click.native="$store.commit('SQ')"
      >免费获取方案</info-btn
    >
  </section>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "危险源辨识",
          subtitle:
            "安全团队采用SCL安全检查表法，对人、物、环境、管理等4大因素进行危险源辨识。",
        },
        {
          title: "风险评级",
          subtitle:
            "通过系统内置的LC和LEC方法进行定量评价，划分等级，包括重大风险（红色）、较大风险（橙色）、一般风险（黄色）、低风险（蓝色）。",
        },
        {
          title: "风险管控",
          subtitle:
            "根据风险辨识和分级情况，编写《安全风险分级管控措施清单》，内容包括风险点、所在位置、风险等级、检查项、危险源或潜在事件、事故后果、管理措施等。",
        },
        {
          title: "岗位落实",
          subtitle: "依据风险管控措施清单，明确管控岗位和责任人。",
        },
      ],
    };
  },
};
</script>

<style scoped>
.s14-box {
  /* width: 610px; */
}
.s14-box > div:nth-child(1) {
  background: linear-gradient(145deg, #036efe 0%, #032dfe 100%);
}
.s14-box > div:nth-child(2) {
  background: linear-gradient(136deg, #ffc400 0%, #ff5300 100%);
}
.s14-box > div:nth-child(3) {
  background: linear-gradient(143deg, #00d09d, #00a760 100%);
}
.s14-box > div:nth-child(4) {
  /* width: 138px; */
  /* height: 140px; */
  background: linear-gradient(126deg, #1cbeff 2%, #0587ff 100%);
}
.s14-box > div:nth-child(5) {
  /* width: 112px; */
  /* height: 140px; */
  background: linear-gradient(305deg, #a625fb 0%, #d36dfd 100%);
}
</style>